import { useState } from "react";
import { TaskCarddPhotoGallery } from "../TaskBoard/TaskCardPhotoGallery"
import { TaskSlider } from "./TaskSlider"

export const TaskCardSlider = ({ taskData }: { taskData: Task }) => {
  const [popupSlider, setPopupSlider] = useState(false);
  const [popupSliderIndex, setPopupSliderIndex] = useState(0);

  const activeSliderIndex = (index: number) => {
    setPopupSliderIndex(index);
    setPopupSlider(true);
  };

  if (taskData.files.length === 0) return null

  return (<>
    <TaskCarddPhotoGallery files={taskData.files} onClick={activeSliderIndex} />
    <TaskSlider
      arr={taskData.files}
      open={popupSlider}
      setOpen={setPopupSlider}
      activeSliderIndex={popupSliderIndex}
    />
  </>
  )
}